<template>
  <div style="margin:20px 0px">
    <div class="commentContentInfo">
      <el-avatar icon="el-icon-user-solid"></el-avatar>
      <span class="username">{{ comment.userEntity.username }}</span>
      <span v-if="parentId != 0" class="parentName"> 回复 {{ parentUserName }}</span>
      <!-- <span class="time">{{ comment.commentEntity.gmtCreated }}</span> -->
      <span class="callback" @click="callBackTo">回复</span>
    </div>

    <div class="commentContentItemCon">
      {{ comment.commentEntity.commentContent }}
    </div>

    <div class="commentBox" v-if="isChecked">
      <el-input type="textarea" placeholder="请输入内容"></el-input>
      <div class="btn">
        <el-button type="primary" size="mini">发表</el-button>
        <el-button size="mini" @click="cancelChecked">取消</el-button>
      </div>
    </div>
  </div>
</template>

<script>
import { ReqCommentById } from '../request'
export default {
  props: {
    comment: {
      type: Object,
      default() {
        return {};
      },
    },
  },
  data() {
    return {
      isChecked: false,
      parentId:"",
      parentUserName:""
    };
  },
  methods: {
    cancelChecked() {
      this.isChecked = false;
    },
    callBackTo() {
      this.isChecked = true
    },
    // 获取父元素
    async getParentComment() {
      this.parentId = this.comment?.commentEntity?.parentId
      const resultData = await ReqCommentById({id: this.parentId})
      // console.log(resultData)
      const { commentVo } = resultData
      console.log(commentVo)
      this.parentUserName = commentVo.userEntity?.username
      // console.log(this.parentUserName)
      this.parentId = commentVo.commentEntity?.parentId
      console.log(this.parentId)
      console.log(this.parentUserName)
    }
  },
  created() {
    this.getParentComment()
  }
};
</script>

<style scoped>
.parentName {
  font-size: 8px;
}
</style>
